import { Dispatch, SetStateAction, useActionState, useEffect } from "react";
import { useInsertInput } from "../input/input";

export const ExitDialog = ({ open, onClose, onConfirm }: { open: boolean, onClose: () => void, onConfirm: () => void }) => {
    return <>
        <dialog open={open}>
            <p>是否确认登出？</p>
            <button onClick={onConfirm}>确认</button>
            <button onClick={onClose}>取消</button>
        </dialog>
    </>
}

export const InsertDialog = ({ open, setShowDialog, items }: { open: boolean, setShowDialog: Dispatch<SetStateAction<boolean>>, items: Item[] }) => {

    const [_username, username, isCheck] = useInsertInput({ name: 'username' });

    const handleClose = () => {
        setShowDialog(false);
    };

    const handleConfirm = async () => {

        const f = new FormData();
        f.set('username', JSON.stringify(_username));

        const res = await (await fetch('/api/insertItem', {method: 'POST', body: f})).json();

        console.log(8888,res);
        
        if (res) {
            items.push(JSON.parse(res));
        }

        setShowDialog(false);
    };

    return <>
        <div>
            <dialog open={open} style={{ width: '40vh' }}>

                <p>usrname:</p> {username}

                <button onClick={handleConfirm}
                    style={{ backgroundColor: '#00BCD4', padding: '2px 20px', borderRadius: '5px' }}
                    disabled={!isCheck}>
                    添加
                </button>

                <button onClick={handleClose}
                    style={{ backgroundColor: '#00BCD4', padding: '2px 20px', borderRadius: '5px' }} >
                    取消
                </button>
            </dialog>
        </div>
    </>
}

export const ItemDialog = ({ open, setShowDialog, item }: { open: boolean, setShowDialog: Dispatch<SetStateAction<boolean>>, item: Item | undefined }) => {

    const handleClose = () => {
        setShowDialog(false);
    };

    return <>
        <div>
            <dialog open={open} style={{ width: '40vh' }}>

                <div>
                    <p>id:</p> {item?.id}
                    <hr />
                    <p>user_id:</p> {item?.user_id}
                    <hr />
                    <p>name:</p> {item?.name}
                </div>

                <button onClick={handleClose} style={{ backgroundColor: '#00BCD4', padding: '2px 20px', borderRadius: '5px' }} >
                    关闭
                </button>
            </dialog>
        </div>
    </>
}


